<script lang="ts" setup>
import {computed, ref} from "vue";
import {toast} from "../../components/popup/popup"
import UniIcons from "../../uni_modules/uni-icons/components/uni-icons/uni-icons.vue";
import {getAllAnnouncement,delAnnouncement} from "../../api/announcement"
import UniPopupDialog from "../../uni_modules/uni-popup/components/uni-popup-dialog/uni-popup-dialog.vue";
import UniPopup from "../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import UniTag from "../../uni_modules/uni-tag/components/uni-tag/uni-tag.vue";
import UniDatetimePicker from "../../uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue";
import { goNewAnnouncement,goManage,goEditNewAnnouncement } from "../../tools/go"



const showTag = ref(false)
const showDate = ref(false)
const searchText = ref("");
const isRefreshing = ref(false);
const deletePopup = ref();
const currentDeleteId = ref<number>();
const selectTag = ref("")
const selectDate = ref("")

const annList = ref([])


const filterList = computed(() => {
    return annList.value.filter((notice) => {

      const search = notice["title"].includes(searchText.value)
          || notice["content"].includes(searchText.value)

      const statusFilter = selectTag.value === ""
          || notice["status"] === selectTag.value

      const dateFilter = selectDate.value === ""
          || notice["publicTime"].includes(selectDate)

      return search && statusFilter && dateFilter

    })
})


const handleStatusFilter = (item) => {
  // 实现状态筛选逻辑
  if (item === selectTag.value) {
    selectTag.value = ""
  } else {
    selectTag.value = item
  }
};

const handleCreateNotice = () => {
  goNewAnnouncement()
};

const handleEdit = (id: number) => {
  goEditNewAnnouncement(id)
};

const handleDelete = (id: number) => {
  currentDeleteId.value = id;
  deletePopup.value.open();
};

const confirmDelete = () => {
  if (currentDeleteId.value) {
    annList.value = annList.value.filter(
        (notice) => {
          notice.id !== currentDeleteId.value
          if (notice.id === currentDeleteId.value) {
            delAnnouncement(notice.id).then(res => {
              if (res["code"] === 200) {
                init()
              }
            })
          }


        }
    );
    toast("删除成功", "success")
  }
  deletePopup.value.close();
};

const cancelDelete = () => {
  deletePopup.value.close();
};


const annPage = {
  page:1,
  size:10
}

const getAnn = () => {
  getAllAnnouncement(annPage.page, annPage.size).then(res => {
    console.log(res)
    annList.value = res.data.records
  })
}

const init = () => {
  getAnn()
}

init()

</script>

<template>
  <view class="back">
  <view class="page">
    <!-- 顶部导航 -->
    <view class="header">
      <v-icon @click="goManage" class="icon" icon="mdi-chevron-left"></v-icon>
      <text class="title">公告管理</text>
      <text size="mini" @click="handleCreateNotice">新建公告</text>
    </view>

    <!-- 搜索区域 -->
    <view class="search-section">
      <view class="search-box">
        <uni-icons type="search" size="16" color="#999"></uni-icons>
        <input
            type="text"
            v-model="searchText"
            placeholder="搜索公告标题或内容"
        />
      </view>
      <view class="filter-box">
        <view class="date-filter" @click="showDate = !showDate">
          <text>发布日期</text>
          <uni-icons v-if="!showDate" type="down" size="14" color="#666"></uni-icons>
          <uni-icons v-else type="up" size="14" color="#666"></uni-icons>
        </view>
        <view class="status-filter" @click="showTag = !showTag">
          <text>状态筛选</text>
          <uni-icons v-if="!showTag" type="down" size="14" color="#666"></uni-icons>
          <uni-icons v-else type="up" size="14" color="#666"></uni-icons>
        </view>
      </view>

      <view class="tag" v-if="showTag">

        <view class="tag-view">
          <uni-tag @click="handleStatusFilter(2)" :inverted="selectTag !== 2" text="已发布" type="primary" />
        </view>

        <view class="tag-view">
          <uni-tag @click="handleStatusFilter(1)" :inverted="selectTag !== 1" text="草稿" type="success" />
        </view>

        <view class="tag-view">
          <uni-tag @click="handleStatusFilter(0)" :inverted="selectTag !== 0" text="删除" type="error" />
        </view>

      </view>

      <view class="example-body">
        <uni-datetime-picker v-if="showDate" type="date" :clear-icon="false" v-model="selectDate" />
      </view>

      <view>

      </view>

    </view>

    <!-- 公告列表 -->
    <scroll-view
        class="notice-list"
        scroll-y
        :refresher-triggered="isRefreshing"
    >
      <template v-if="annList.length > 0">
        <view
            class="notice-card"
            v-for="notice in filterList"
            :key="notice.id"

        >
          <view class="notice-header">
            <text class="notice-title">{{ notice.title.substring(0,15)}}</text>
            <text class="notice-time">{{ notice["publicTime"] }}</text>
          </view>
          <text class="notice-content">{{ notice.content }}</text>
          <view class="notice-footer">
            <text :class="['status-tag', notice.status === 3 || notice.status === 1 ? 'draft' : notice.status === 2 ? 'published' :  'deleted']"
            >{{ notice.status === 3 || notice.status === 1 ? '草稿' : notice.status === 2 ? '已发布' :  '删除' }}</text
            >
            <view class="operation">
              <uni-icons
                  type="compose"
                  size="20"
                  color="#666"
                  @click="handleEdit(notice.id)"
              ></uni-icons>
              <uni-icons
                  type="trash"
                  size="20"
                  color="#666"
                  @click="handleDelete(notice.id)"
              ></uni-icons>
            </view>
          </view>
        </view>
      </template>

      <!-- 空状态 -->
      <view v-else class="empty-state">
        <uni-icons type="info" size="64" color="#999"></uni-icons>
        <text class="empty-text">暂无公告内容</text>
        <uni-button type="primary" size="mini" @click="handleCreateNotice"
        >新建公告</uni-button
        >
      </view>
    </scroll-view>

    <!-- 删除确认弹窗 -->
    <uni-popup ref="deletePopup" type="dialog">
      <uni-popup-dialog
          type="warning"
          title="删除确认"
          content="确定要删除该公告吗？"
          :before-close="true"
          @confirm="confirmDelete"
          @close="cancelDelete"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</view>
</template>

<style scoped lang="scss">
@use "../../static/css/main";
.back{
  @include main.useTheme() {

.example-body{
  margin-top: 20rpx;
}

.tag{
  .tag-view{
    margin-right: 20rpx;
  }
  display: flex;
  flex-wrap: wrap;
  margin-top: 20rpx;
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: main.getVal("primary_bg_color");
}

.header {
  background-color: main.getVal("primary_bg_color");
  display: flex;
  padding: 0.625rem 0.9375rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  align-items: flex-end;
  justify-content: space-between;
}

.title {
  font-size: 18px;
  color: main.getVal("primary_text_color");
  font-weight: 400;
  margin-left: 26px;
}

uni-button {

        color: main.getVal("primary_text_color");
    }

.search-section {
  padding: 20rpx 30rpx;
  background-color: main.getVal("one_lv_bg_color");
}

.search-box {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  background-color: main.getVal("two_lv_bg_color");
  border-radius: 32rpx;
}

.search-box input {
  &::placeholder {
            color: main.getVal("other_lv_text_color");
          }
  flex: 1;
  margin-left: 16rpx;
  font-size: 14px;
  color: main.getVal("primary_text_color");
}

.filter-box {
  color: main.getVal("one_lv_text_color");
  display: flex;
  margin-top: 20rpx;
  gap: 20rpx;
}

.date-filter,
.status-filter {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 12rpx 20rpx;
  background-color: #f5f5f5;
  border-radius: 24rpx;
}

.date-filter text,
.status-filter text {
  font-size: 12px;
  color: #666666;
}

.notice-list {
  background-color: main.getVal("primary_bg_color");
  flex: 1;
  overflow: auto;
  padding: 20rpx 30rpx;
}

.notice-card {
  padding: 12px;
  margin-bottom: 20rpx;
  background-color: main.getVal("one_lv_bg_color");
  border: 1px solid main.getVal("primary_border_color");
  border-radius: 12rpx;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.notice-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16rpx;
}

.notice-title {
  flex: 1;
  font-size: 16px;
  font-weight: bold;
          color: main.getVal("two_lv_text_color");
}

.notice-time {
  font-size: 12px;
  color: main.getVal("two_lv_text_color");
  margin-left: 16rpx;
}

.notice-content {
  font-size: 14px;
  color: main.getVal("one_lv_text_color");
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.notice-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16rpx;
}

.status-tag {
  padding: 4rpx 16rpx;
  border-radius: 16rpx;
  font-size: 12px;
}

.published {
  background-color: #e8f5e9;
  color: #4caf50;
}

.draft {
  background-color: #eeeeee;
  color: #666666;
}

.expired {
  background-color: #ffebee;
  color: #f44336;
}

.operation {
  color: main.getVal("one_lv_text_color") !important;
  display: flex;
  gap: 24rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: 200rpx;
}

.empty-text {
  margin: 20rpx 0 32rpx;
  font-size: 14px;
  color: main.getVal("other_lv_text_color");
}
  }}
</style>
